<template>
  <hips-view sub-header-fixed>
    <hips-nav-bar
      slot="header"
      title="文件类"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="download">
      <hips-button @click="downloadFuc">
        文件下载
      </hips-button>
    </demo-block>

    <demo-block title="upload">
      <hips-button @click="uploadFuc">
        文件上传
      </hips-button>
    </demo-block>

    <demo-block title="imagePreviewer">
      <hips-button @click="imagePreviewerFuc">
        图片预览
      </hips-button>
    </demo-block>

    <demo-block title="imageToBase64">
      <hips-button @click="imageToBase64Fuc">
        图片转Base64
      </hips-button>
    </demo-block>

    <demo-block title="base64ToImage">
      <hips-button @click="base64ToImageFuc">
        Base64转图片
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button } from '@hips/vue-ui';

import { Files } from '@hips/plugin-vue-jssdk';

const {
  download,
  upload,
  imagePreviewer,
  imageToBase64,
  base64ToImage,
} = Files;

export default {
  components: {
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {};
  },
  methods: {
    downloadFuc() {
      download({
        source: 'http://hzerodevb.saas.hand-china.com/hfle...',
        persistence: true,
        headers: {
          token: 'bearer b23634aa-ec3e-4f63-8493-572831c03fdc',
        },
        onProgress: (progress) => {
          console.log('progress = ', progress);
        },
        onFinish: (res) => {
          console.log('res = ', res);
        },
        onFail: (err) => {
          console.log('err = ', err);
        },
      });
    },
    uploadFuc() {
      upload({
        source:
          '/storage/emulated/0/Android/data/com.hand.hippius/cache/modified.jpg',
        target:
          'http://hzerodevb.saas.hand-china.com/hfle/v1/files/multipart?bucketName=hippius-iam',
        headers: {
          token: 'bearer b23634aa-ec3e-4f63-8493-572831c03fdc',
        },
        onProgress: (progress) => {
          console.log('progress = ', progress);
        },
        onFinish: (res) => {
          console.log('res = ', res);
        },
        onFail: (err) => {
          console.log('err = ', err);
        },
      });
    },
    imagePreviewerFuc() {
      imagePreviewer({
        imagesList: [ 'http://xxxx' ],
        currentIndex: 0,
      })
        // .then((res) => {})
        // .catch((err) => {});
    },

    imageToBase64Fuc() {
      imageToBase64({
        filePath: 'file://1.png',
        quality: 90,
      })
        .then((res) => {
          console.log('res = ', res);
        })
        .catch((err) => {
          console.log('err = ', err);
        });
    },
    base64ToImageFuc() {
      base64ToImage('base64')
        .then((res) => {
          console.log('res = ', res);
        })
        .catch((err) => {
          console.log('err = ', err);
        });
    },
  },
};
</script>

<style lang="stylus"></style>
